<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue-2.5.17.js"></script>
</head>
<body>
<p>全局组件</p>
<div id="globalComponent">
    <zyb></zyb>
</div>
<script>
    // 注册组件
    Vue.component("zyb", {
        //template名字不能改变
        template: "<h4>zyb自定义全局组件 全局组件 全局组件</h4>"
    });
    // 创建根实例
    new Vue({
        el: "#globalComponent"
    })
</script>
<hr>
<!-- =================================================================================================================== -->
<p>局部组件</p>
<div id="partComponent">
    <myself></myself>
</div>
<script>
    // 注册组件
    var child = {
        //template名字不能改变
        template: "<h4>zyb自定义局部组件 局部组件 局部组件</h4>"
    };
    // 创建根实例
    new Vue({
        el: "#partComponent",
        components: {
            "myself": child
        }
    })
</script>
<hr>
<!-- =================================================================================================================== -->
<div id="propFirst">
    <p>静态父类组件信息传递</p>
    <child message="hello propFirst !"></child>
</div>
<script>
    Vue.component("child", {
        props: ['message'],
        template: "<span>{{message}}</span>"
    })
    new Vue({
        el: "#propFirst"
    })
</script>
<hr>
<!-- =================================================================================================================== -->
<div id="propSecond">
    <p>动态父类组件信息传递</p>
    <input type="text" v-model="inputContent" placeholder="请输入信息..."><br>
    <p>
        同步的数据 :
        <child v-bind:message="inputContent"></child>
    </p>
</div>
<script>
    Vue.component("child", {
        props: ['message'],
        template: "<span>{{message}}</span>"
    })
    new Vue({
        el: "#propSecond",
        data: {
            inputContent: ""
        }
    })
</script>
<hr>
<!-- =================================================================================================================== -->
<div id="propThird">
    <p>prop的实例</p>
    <ul>
        <zyb v-for="item in items" v-bind:prop="item"></zyb>
    </ul>
</div>
<script>
    Vue.component("zyb", {
        props: ["prop"],
        template: "<li>{{prop.text}}</li>"
    })

    new Vue({
        el: "#propThird",
        data: {
            items: [
                {text: "baidu"},
                {text: "google"},
                {text: "sougou"},
                {text: "jingdong"}
            ]
        }
    })
</script>
<hr>
<!-- =================================================================================================================== -->
<div id="instructionFirst">
    <p>自定义全局指令,页面打开,制定聚焦到输入框...</p>
    <input v-focus>
</div>
<script>
    //注册一个全局自定义指令
    Vue.directive("focus", {
        //绑定元素插入到DOM中
        inserted: function (el) {
            //聚焦元素
            el.focus()
        }
    })

    new Vue({
        el: "#instructionFirst"
    })
</script>
<hr>
<!-- =================================================================================================================== -->
<div id="instructionSecond">
    <p>自定义局部指令,页面打开,制定聚焦到输入框...</p>
    <input v-focus>
</div>
<script>
    //创建根实例
    new Vue({
        el: "#instructionSecond",
        directives: {
            //注册一个局部的自定义指令
            focus: {
                //指令的定义
                inserted: function (el) {
                    //聚焦元素
                    el.focus()
                }
            }
        }
    })
</script>
</body>
</html>




















